<template>
  <el-dialog :model-value="open" :class="styles['dialog']" width="1058px" top="2vh" append-to-body :show-close="false" destroy-on-close>
    <DrawerHeader :title="headerTitle" @close="close"/>
    <div :class="styles['container']" id="printRef">
      <div :class="[styles['container-item'], {[styles['active']]: index === currentOrdersIndex}]" style="padding: 12px; page-break-before: always" v-for="(state, index) in stateList" :key="index">
        <h3 style="font-size: 22px; color: #303133;font-weight: bold;text-align: center;padding: 12px 0;">{{ isVip ? 'VIP' : '' }}{{ title }}</h3>
        <div style="width: 100%">
          <PrintCardOrderInfo
              :state="state"
              :infoProps="infoProps"
          />
          <PrintTable
              :columns="tableColumns"
              :rows="state.cardInfos"
          />
        </div>
      </div>
    </div>
    <p :class="styles['page']">
      <span :class="[styles['button'], {[styles['disabled']]: currentOrdersIndex < 1}]" @click="currentOrdersIndex--">上一单 </span>
      <span> {{ currentPageLabel }} </span>
      <span :class="[styles['button'], {[styles['disabled']]: currentOrdersIndex === stateList.length - 1}]" @click="currentOrdersIndex++"> 下一单</span>
    </p>
    <div :class="styles['footer']">
      <el-button size="large" @click="close">返回</el-button>
      <el-button type="primary" size="large" @click="handlePrint">{{ buttonTitle }}({{ stateList.length }}单)</el-button>
    </div>
  </el-dialog>
</template>

<script setup name="printCardOrders">
import {computed, ref} from 'vue'
import {DrawerHeader, PrintTable} from '@/components'
import PrintCardOrderInfo from './PrintCardOrderInfo'
import printJS from 'print-js'
import {ElMessageBox} from 'element-plus'

const emit = defineEmits(['close'])
const props = defineProps({
  stateList: Array,
  title: String,
  headerTitle: String,
  isVip: Boolean,
  open: Boolean,
  tableColumns: Array,
  infoProps: Array,
  prop: String
})

const currentOrdersIndex = ref(0)

const currentPageLabel = computed(() => {
  return `(${currentOrdersIndex.value + 1}/${props.stateList.length})`
})

const buttonTitle = computed(() => {
  switch (props.prop) {
  case 'firstReview': return '打印全部送卡订单'
  case 'review': return '打印全部送卡订单'
  case 'putStore': return '打印全部入库订单'
  default: return ''
  }
})

// 关闭
function close () {
  emit('close')
}

// 开箱初审打印订单
function fistReviewPrint () {
  ElMessageBox.alert('完成开箱初审的卡牌，需按照送卡订单分类，连同纸质的送卡订单放入【待入库-中转篮】存储，再移交下一环节处理。', '温馨提示', {
    confirmButtonText: '我知道了',
    center: true,
    type: 'warning',
    callback: () => {
      onPrint()
    }})
}
function handlePrint () {
  switch (props.prop) {
  case 'firstReview': return fistReviewPrint()
  case 'review': return onPrint()
  case 'putStore': return onPrint()
  default: return onPrint()
  }
}
function onPrint () {
  printJS({
    printable: 'printRef',
    type: 'html',
    css: '',
    style: `
            @page{ margin:0cm 0.5cm; line-height: 20px; }
            thead th {
              border: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            table {
              border-collapse: collapse;
            }
    `,
    scanStyles: false,
    targetStyles: ['*']
  })
}
</script>

<style lang="less" src="./index.less" module="styles"></style>
